<template>
    <p>Home</p>
    <van-button type="primary">按钮</van-button>

    <p>组合式api写法</p>
    <p>count:{{ count }}</p>
    <p>test:{{ test }}</p>
    <p>reactive写法=======</p>
    <p>obj:{{ obj }}</p>
    <p>obj.name:{{ obj.name }}</p>
    <p>obj.age:{{ obj.age }}</p>
    <p>arr:{{ arr }}</p>
    <p>arr[0]:{{ arr[0] }}</p>

    <p>computed</p>
    <p>countAddFive:{{ countAddFive }}</p>

    <p>method</p>
    <button @click="countAddOne">count + 1</button>
    <button @click="countAddTwo">count + 2</button>
    <button @click="updateObj">更新obj</button>

    <p>组件</p>
    <Son :foo="obj.name" :age="obj.name" />
</template>

<script>
import {ref,reactive,computed,watch} from 'vue'
import Son from './Son.vue'
export default {
    components:{
        Son
    },

    setup() {
        const count = ref(0)
        const test = ref('hello wolrd')

        console.log(count.value);

        const obj = reactive({
            name: 'tom',
            age: 12
        })
        const arr = reactive([0,1,2]) 

        const countAddFive = computed(() => {
            return count.value + 5
        })

        console.log(obj.name)

        //methods
        function countAddOne() {
            count.value++
        }
        const countAddTwo = () => {
            count.value+=2
        }
        const updateObj = () => {
            updateObjName()
        }
        const updateObjName = () => {
            obj.name = 'jerry'
        }

        watch(count,(newVal,oldVal) => {
            console.log('count改变了');
            console.log('newVal',newVal);
            console.log('oldVal',oldVal);
        })

        watch(countAddFive,(newVal,oldVal) => {
            console.log('countAddFive改变了');
            console.log('newVal',newVal);
            console.log('oldVal',oldVal);
        })

        watch(obj,(newVal,oldVal) => {
            console.log('obj改变了');
            console.log('newVal',newVal);
            console.log('oldVal',oldVal);
        })

        watch(() => obj.name,(newVal,oldVal) => {
            console.log('obj.name改变了');
            console.log('newVal',newVal);
            console.log('oldVal',oldVal);
        })
        

        return {
            count,
            test,
            obj,
            arr,
            countAddFive,
            countAddOne,
            countAddTwo,
            updateObj
        }
    }
}
</script>